<template>
    <view class="byt-startup">
        <view class="byt-startup__box">
            <view class="byt-startup__assistant" :class="{ 'is-active': show }">
                <view class="byt-startup__assistant-left">
                    <basic-icon size="140rpx" :name="icon"></basic-icon>
                    <view class="byt-startup__assistant-left__tag"></view>
                </view>
                <view class="byt-startup__assistant-right is-active" v-if="show">努力解答中...</view>
                <view class="byt-startup__assistant-right is-tip" v-else>
                    {{ description }}
                </view>
                <basic-image
                    class="byt-startup__assistant-banner"
                    width="268rpx"
                    height="206rpx"
                    src="https://img.yummall.cn/baiyetong/byt-uni-ui/header_banner_right.png"
                ></basic-image>
            </view>
        </view>
    </view>
</template>

<script>
// import { BasicIcon, BasicImage } from '../../basic';
// 图标
import BasicIcon from '../../basic/basic-icon/basic-icon.vue';
// 图片
import BasicImage from '../../basic/basic-image/basic-image.vue';
export default {
    name: 'Welcome',
    components: {
        BasicIcon,
        BasicImage
    },
    props: {
        // AI头像思考动画显示
        show: {
            type: Boolean,
            default: false
        },
        // 描述
        description: {
            type: String,
            default: '我是红商AI助手。您有任何关于红商集团的问题，我可以随时帮您解答。'
        },
        icon: {
            type: String,
            default: 'https://img.yummall.cn/baiyetong/byt-uni-ui/role_icon_1.svg'
        }
    },
    computed: {},
    data() {
        return {};
    }
};
</script>

<style lang="scss" scoped>
@keyframes rotateAnimation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@include b(startup) {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 16rpx;
    height: 204rpx;
    box-sizing: border-box;
    overflow-y: visible;

    @include e(box) {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 1800rpx;
        height: 204rpx;
        margin: 0 auto;
        position: relative;
    }

    @include e(assistant) {
        position: relative;
        height: 204rpx;
        flex-grow: 1;
        display: flex;
        align-items: center;
        padding-left: 16rpx;
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(241, 250, 255, 0.8) 0%, rgba(243, 246, 255, 0.8) 100%);
        backdrop-filter: blur(8px);

        @include eb(banner) {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 1;
        }

        @include eb(left) {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 156rpx;
            height: 156rpx;
            z-index: 3;
            transition: all 0.3s;

            @include e(tag) {
                position: absolute;
                width: 156rpx;
                height: 156rpx;
                background: url('https://img.yummall.cn/baiyetong/byt-uni-ui/header_icon_outline.png');
                background-size: 100% 100%;
                left: 0;
                top: 0;
                z-index: 4;
            }
        }

        @include eb(right) {
            z-index: 2;

            &.is-active {
                // position: absolute;
                // left: 62rpx;
                // top: 26rpx;
                width: 0;
                height: 82rpx;
                line-height: 82rpx;
                padding-left: 48rpx;
                border-top-right-radius: 82rpx;
                border-bottom-right-radius: 82rpx;
                background: -webkit-linear-gradient(left, #a8ecff, #27c9ff);
                opacity: 0;
                transition: all 0.3s;
                color: white;
                white-space: nowrap;
                overflow: hidden;
            }

            &.is-tip {
                box-sizing: content-box;
                min-width: 400rpx;
                width: auto !important;
                max-width: calc(100% - 240rpx);
                margin-left: 14rpx;
                font-size: 24rpx;
                font-weight: 400;
                padding: 16rpx 14rpx;
                text-align: justify;
                color: #1890ff;
                background: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(4px);
                box-sizing: border-box;
                border: 1px solid #b5edff;
                border-radius: 0 12rpx 12rpx 12rpx;
                // background: url('https://img.yummall.cn/wxapp/study/img/ai-assistant-chat-box.png') no-repeat;
                background-size: 100% 100%;
                line-height: 1.5;
            }
        }

        $selector: &;

        &.is-active {
            #{$selector + '-left'} {
                transform: scale(1.1) translateX(20%);

                &__tag {
                    animation: rotateAnimation 3s infinite linear;
                }
            }

            #{$selector + '-right'} {
                left: 144rpx;
                width: 232rpx;
                opacity: 1;
            }
        }
    }

    // &:after {
    // 	content: '';
    // 	position: absolute;
    // 	right: 0;
    // 	bottom: -28rpx;
    // 	left: 0;
    // 	height: 28rpx;
    // 	border-top-right-radius: 20rpx;
    // 	border-top-left-radius: 20rpx;
    // 	background: -webkit-linear-gradient(top, #fff, #ffffff00);
    // 	z-index: 9;
    // }
}
</style>
